<template>
  <div class="ssd">
    <van-nav-bar title="" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-button type="success" @click="sendpro">发表</van-button>
      </template>
    </van-nav-bar>

    <van-cell-group inset>
      <van-field
        v-model="message"
        rows="4"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="这一刻的想法..."
        show-word-limit
      />
    </van-cell-group>

    <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    <br /><br />
    <br />

    <van-cell
      :title="areas"
      icon="location-o"
      is-link
      style="text-align: left"
      @click="showPopup"
    >
    </van-cell>
    <van-popup v-model:show="show">
      <van-area
        title="省市区"
        :area-list="areaList"
        @confirm="area"
        @cancel="bindCancel"
      />
    </van-popup>
    <van-cell
      title="提醒朋友"
      icon="volume-o"
      is-link
      style="text-align: left"
      @click="showpeoplePopup"
    >
    </van-cell>
    <van-popup
      v-model:show="peopleshowPicker"
      destroy-on-close
      round
      position="bottom"
      closeable
      @close="onClickCloseIcon"
    >
      <br /><br /><br /><br />
      <van-checkbox-group v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in data.peopleshow"
            clickable
            :key="item.id"
            :title="item.title"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                :name="item"
                :ref="(el) => (checkboxRefs[index] = el)"
                @click.stop
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>

    <van-cell
      title="谁可以看"
      icon="manager-o"
      is-link
      :value="remindpickerValue"
      style="text-align: left"
      @click="remindshowPopup"
    >
    </van-cell>
    <van-popup
      v-model:show="remindPicker"
      destroy-on-close
      round
      position="bottom"
    >
      <van-picker
        :model-value="remindpickerValue"
        :columns="columns"
        @cancel="cancleremake"
        @confirm="remindonConfirm"
      />
    </van-popup>
    <van-cell
      title="显示分享面板"
      @click="showShare = true"
      style="text-align: left"
    />
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>


<script setup>
import { onMounted, ref, reactive } from "vue";
import { areaList } from "@vant/area-data";

// import { getlogin } from '../api/getlogin'
import {
  getuploadimg,
  lookpeople,
  getfriendcircle,
  getfriendinfo,
} from "../api/getlogin";
import { showToast, showSuccessToast } from "vant";
import { useRouter } from "vue-router";
const fileList = ref([
  // { url: '' },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
]);
const show = ref(false);
const router = useRouter();
const message = ref("");
const arrArea = reactive([]);
const areas = ref("所在位置");
const image = reactive([]);
const lookdata = reactive({ lookpeoplelist: [], loading: false });
const data = reactive({ peopleshow: [], loading: false });
const remindPicker = ref(false);
const peopleshowPicker = ref(false);
// const remindpickerValue = ref("公开");
const remindpickerValue = ref(["公开"]);
const checked = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
  checkboxRefs.value[index].toggle();

  // console.log(checkboxRefs.value);
};
const onClickCloseIcon = () => {
  const uniqueNames = new Set();
  checkboxRefs.value.forEach((item, i) => {
    if (item.checked.value === true) {
      uniqueNames.add(item.name.title); // 假设 item.name 是正确的属性
    }
  });

  lookdata.lookpeoplelist = Array.from(uniqueNames);
};
const columns = [
  { text: "公开", value: 0 },
  { text: "朋友可见", value: 1 },
  { text: "仅自己可见", value: 2 },
];
//提醒谁看
const remindshowPopup = () => {
  remindPicker.value = true;
};
const showpeoplePopup = () => {
  peopleshowPicker.value = true;
};
const cancleremake = () => {
  console.log(remindpickerValue.value[0]);

  remindpickerValue.value[0] = "公开";
  remindPicker.value = false;
};
const remindonConfirm = (val) => {
  console.log(val);

  remindpickerValue.value[0] = val.selectedOptions[0].text;
  remindPicker.value = false;

  // console.log(val[0].name + "-" + val[1].name + "-" + val[2].name);
  // console.log(val);
  // console.log(val[0].name + "-" + val[1].name + "-" + val[2].name);
};
//发布朋友圈对象
const sendfriend = reactive({
  title: "",
  image: [],
  address: "",
  warnfriend: [],
  look: "",
});

/**
 * 发送朋友圈内容
 */
const sendpro = () => {
  // getfriendcircle({title});
  sendfriend.title = message.value;
  sendfriend.image = image;
  sendfriend.address = areas.value;
  sendfriend.warnfriend = lookdata.lookpeoplelist;
  sendfriend.look = remindpickerValue.value[0];
  console.log(sendfriend);

  getfriendcircle(sendfriend);

  showSuccessToast("发表成功");
  router.push({
    path: "/cricle",
  });

  // router.push({
  //   path: "/cricle",
  // });
  // console.log(sendfriend.image);
};
//朋友圈返回
const onClickLeft = () => {
  history.back();
};

const showPopup = () => {
  show.value = true;
};
const bindCancel = () => {
  show.value = false;
  areas.value = "所在位置";
};
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  image.push(file.content);
  console.log(image);
};

const area = (val) => {
  console.log(val.selectedOptions[0], "type");

  areas.value =
    val.selectedOptions[0].text +
    "-" +
    val.selectedOptions[1].text +
    "-" +
    val.selectedOptions[2].text;
  show.value = false;
};

//分享面板
const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
const onSelect = (option) => {
  console.log(option);

  showToast(option.name);
  showShare.value = false;
};

onMounted(async () => {
  // const { data: res } = await getlogin();
  // console.log(res);
  lookpeople().then((res) => {
    console.log(res);
    data.peopleshow = res.data;
    console.log(data.peopleshow);
  });
  getfriendinfo().then((res) => {
    console.log(res.data, "tttttttttt");
  });
});
</script>
 


<style>
</style>